<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <meta charset="UTF-8">
    <title>绑定账号</title>
    <link href="../static/css/bootstrap.min.css" th:href="@{css/bootstrap.min.css}" rel="stylesheet"/>
    <link href="../static/css/font-awesome.min.css" th:href="@{css/font-awesome.min.css}" rel="stylesheet"/>
    <link href="../static/css/style.css" th:href="@{css/style.css}" rel="stylesheet"/>
    <link href="../static/css/login.min.css" th:href="@{css/login.min.css}" rel="stylesheet"/>
    <link href="../static/css/login.css" th:href="@{css/login.css}" rel="stylesheet"/>
    <link href="../static/ajax/libs/iCheck/custom.css" th:href="@{/ajax/libs/iCheck/custom.css}" rel="stylesheet"/>
    <link href="../static/ruoyi/css/ry-ui.css" th:href="@{/ruoyi/css/ry-ui.css?v=2.4.0}" rel="stylesheet"/>
    <!--[if lt IE 9]>
    <meta http-equiv="refresh" content="0;ie.html" />
    <![endif]-->
    <link rel="shortcut icon" href="../static/favicon.ico" th:href="@{/static/favicon.ico}"/>
    <style type="text/css">label.error { position:inherit;  }</style>
</head>
<style>
    *{
        margin: 0;
        padding:0;
        box-sizing: border-box;
        font-size: 16px;
    }
    html,body{
        width: 100%;
        height: 100%;
        background-color: rgba(239, 239, 244, 1);
    }

    .top{
        width: 100%;
        /*width:19.2rem;*/
        height:0.7rem;
        background:rgba(255,255,255,1);
        box-shadow:0rem 0rem 0rem 0rem rgba(0, 0, 0, 0.2);

        display: flex;
        align-items: center;
    }
    .top>div{
        width: 50%;
        text-align: center;
    }
    .top .Tleft img{
        width:1.86rem;
        height:0.45rem;
        /*width:0.93rem;*/
        /*height:0.225rem;*/
    }
    .top .Tright div{
        width:1.87rem;
        background:rgba(255,255,255,1);
        border:0px solid rgba(255,155,0,1);

        margin: 0 auto;
        display: flex;
        align-items: center;
    }
    .top .Tright div img{
        wedth:0.2rem;
        height: 0.2rem;
    }
    .top p{
        /*width:1.29rem;*/
        /*height:0.15rem;*/
        font-size:0.18rem;
        font-family:PingFangSC-Regular;
        font-weight:400;
        color:rgba(255,155,0,1);

        text-align: left;
        padding-left: 5px;
    }
    /*================================================*/
    .to0pen{
    }
    .main{
        width: 7.31rem;
        height: 4.71rem;
        background: inherit;
        background-color: rgba(255, 255, 255, 1);
        box-sizing: border-box;
        border-width: 0.01rem;
        border-style: solid;
        border-color: rgba(255, 255, 255, 1);
        border-radius: 0.03rem;

        margin: 0 auto;
        margin-top: 0.8rem;
        color: #333333;
        text-align: center;
    }
    .main>p{
        font-family: 'PingFangSC-Medium', 'PingFang SC Medium', 'PingFang SC';
        font-weight: 500;
        font-style: normal;
        font-size: 0.2rem;
        margin: 0.2rem auto;
    }
    .main>p:nth-child(2){
        font-size: 14px;
        color: #cccccc;
        margin: 0.1rem auto;

    }
    .main .input-p{
        font-family: 'PingFangSC-Light', 'PingFang SC Light', 'PingFang SC';
        font-weight: 200;
        font-style: normal;
        font-size: 0.16rem;
        width: 1.07rem;
        height: 0.45rem;
        line-height: 0.45rem;
        text-align: center;
        background-color: rgba(242, 242, 242, 1);
        box-sizing: border-box;
        border-width: 0.01rem;
        border-style: solid;
        border-color: rgba(228, 228, 228, 1);
        border-radius: 3px 0 0 3px;
    }
    .main .input-content{
        width: 5.53rem;
        margin: 0 auto;
        display: flex;
        margin-bottom: 0.16rem;
    }
    .main input{
        margin: 0 auto;
        width: 4.3rem;
        height: 0.45rem;
        padding-left: 0.2rem;
        border-radius: 0px 3px 3px 0px;
        border: 1px solid rgba(228, 228, 228, 1);
    }
    .main .submit{
        padding:0;
        width: 300px;
        height: 54px;
        background: inherit;
        background-color: rgba(255, 162, 23, 1);
        box-sizing: border-box;
        border-width: 1px;
        border-style: solid;
        border-color: rgba(255, 162, 23, 1);
        border-radius: 3px;
        color: #FFFFFF;

        margin-top: 0.2rem;
        cursor: pointer;
    }
    .main .tips{
        font-size: 12px;
        color: #999999;
    }
    .main .tips a{
        text-decoration: none;
        font-size: 12px;
    }
    .main .input1{
        background: #cccccc;
    }
   /*模态框*/
.bg-content{
    display: none;
    width: 100%;
    height: 100%;
    position: fixed;
    left: 0;
    top:0;
    background: rgba(1,1,1,0.7);
    z-index:998;
}
.login-content{
    display: none;
    width: 378px;
    height: 336px;
    background: #ffffff;
    border-radius: 5px;
    position: fixed;
    left:40%;
    top:30%;
    z-index:999;
    text-align: center;
}
.login-content>p{
    font-family: 'PingFangSC-Regular', 'PingFang SC';
    font-weight: 400;
    font-style: normal;
    font-size: 20px;
    color: #000000;
    margin-top:15px
}
.login-content img{
    position: absolute;
    right: 10px;
    top: 10px;
    cursor: pointer;
}
.login-content .mmain{
    background: #FFFFFF;
    margin: 0 auto;
    font-weight: 400;
    font-style: normal;
    text-align: left;
    font-size:16px;
    color: #333333;
    padding-bottom: 20px;
}

.login-content .main-content{
    font-size: 14px;
    color: #999999;
    margin: 0 auto;
    width: 90%;
    text-align: center;
}
.login-content .main-content p{
    font-size: 14px;
    margin: 20px auto;
    margin-left:5px;
    line-height: 20px;
    text-align: left;
}
.login-content .main-content input{
    font-size: 18px;
    width: 328px;
    height: 48px;
    border: 1px solid rgba(9,9,9,0.1);
    margin-top: 10px;
    padding-left: 10px;
}
.login-content .main-content input::placeholder{
    color: rgba(9,9,9,0.3);
}
.login-content .kc-btn5{
    margin: 30px auto;
    border: none;
    border-radius: 3px;
    color: #FFFFFF;
    width: 297px;
    height: 44px;
    background-color: rgba(153, 204, 0, 1);
    cursor: pointer;
}

</style>
<body>
    <div class="container to0pen">
        <div class="top">
            <div class="Tleft">
                 <img th:src="@{/img/logo@2x.png}" >
            </div>
            <div class="Tright">
                <div>
                     <img th:src="@{/img/Shape@2x.png}" >
                    <p>020-36523365</p>
                </div>
            </div>
        </div>
        <div class="main">
            <p>设置订餐账号和密码</p>
            <p>设置后，下次可以直接通过OA自动登录订餐后台~</p>
            <form id="setaccountForm" >
                <div class="input-content"><input id= "userName" class="btn1 input1" readonly="readonly"></div>
                <div class="input-content"><input name="accountNum" class="btn1" placeholder="请输入账号"></div>
                <div class="input-content"><input name="accountPwd" class="btn1" placeholder="请输入密码"></div>
                <button class="submit" id="setaccountSubmit" data-loading="正在验证登录，请稍后...">确定</button>
            </form>
            <p class="tips">已有订餐账号？<a href="#" onclick="showView()">登录即可绑定</a></p>
        </div>
    </div>
    
    <!--模态框-->
    <div class="bg-content" onclick="hideView()"> 
    </div>

    <div class="login-content">
        <p>登录食堂订餐账号</p>
        <img  onclick="hideView()" th:src="@{/img/close-icon.png}" alt="icon">
        <div class="mmain">
            <div class="main-content">
	            <form id="accountBindForm" >
	                <p>登录您在订餐平台的账号，即可实现通过OA平台自动登录哦！若您忘记账号，可与客户经理联系~</p>
	                <input type="text" name="loginName"  placeholder="请输入订餐账号">
	                <input type="text" name="loginPwd"  placeholder="请输入订餐密码">
	                <button class="kc-btn5" id="accountBindSubmit" data-loading="正在验证登录，请稍后...">登录并绑定OA账号</button>
	            </form>
            </div>
        </div>

    </div>

	<script th:inline="javascript"> var ctx = [[@{/}]]; var captchaType = [[${captchaType}]]; </script>
	<script src="../static/js/jquery.min.js" th:src="@{/js/jquery.min.js}"></script>
	<script src="../static/js/bootstrap.min.js" th:src="@{/js/bootstrap.min.js}"></script>
	<script src="../static/ajax/libs/validate/jquery.validate.min.js" th:src="@{/ajax/libs/validate/jquery.validate.min.js}"></script>
	<script src="../static/ajax/libs/validate/messages_zh.min.js" th:src="@{/ajax/libs/validate/messages_zh.min.js}"></script>
	<script src="../static/ajax/libs/layer/layer.min.js" th:src="@{/ajax/libs/layer/layer.min.js}"></script>
	<script src="../static/ajax/libs/iCheck/icheck.min.js" th:src="@{/ajax/libs/iCheck/icheck.min.js}"></script>
	<script src="../static/ajax/libs/blockUI/jquery.blockUI.js" th:src="@{/ajax/libs/blockUI/jquery.blockUI.js}"></script>
	<!-- <script src="http://tajs.qq.com/stats?sId=62048022"></script> -->
	<script src="../static/ruoyi/js/ry-ui.js" th:src="@{/ruoyi/js/ry-ui.js?v=2.4.0}"></script>
	<script src="../static/ruoyi/setaccount.js" th:src="@{/ruoyi/setaccount.js}"></script>
</body>
</html>
